<template>
    <el-container style="height: 100%">
      <!-- 头部区域 -->
      <el-header>
        <div>
          <img class="logo" src="../assets/logo.png" alt="网址导航">
          <span>菌子导航</span>
        </div>
      </el-header>
      <!-- 页面主体区域 -->
      <el-container>
        <!-- 左侧区域 -->
        <el-aside :width="isCollapse ? '64px' : '200px'">
          <!--菜单折叠-->
          <div class="toggle-button" @click="toggleCollapse">|||</div>
          <el-menu
            background-color="#2E2E2E"
            text-color="#fff"
            active-text-color="#547fcc"
            unique-opened
            :collapse="isCollapse"
            :collapse-transition="false"
            router
            :default-active="activePath"
          >
            <!--1级菜单-->
            <el-submenu :index="menu.id + ''" v-for="menu in menuList" :key="menu.id">
              <!--1级菜单的模板-->
                <template slot="title">
                  <i :class="menu.icon"></i><span>{{menu.menuName}}</span>
                </template>
                <!--2级菜单-->
                <el-menu-item :index="'/' + submenu.path" v-for="submenu in menu.children" :key="submenu.id" @click="activeMenu('/' + submenu.path)">
                  <template slot="title"><i :class="submenu.icon"></i>
                    <span>{{submenu.menuName}}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
          </el-menu>
        </el-aside>
        <!-- 右侧内容主体 -->
        <el-main>
          <!--路由占位-->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
export default {
  data () {
    return {
      menuList: [
        {
          id: 1,
          menuName: '菌子导航',
          path: '',
          order: 1,
          icon: 'el-icon-menu',
          children: [
            {
              id: 101,
              menuName: '常用网址',
              path: 'Nav',
              order: 1,
              icon: 'el-icon-s-home',
              children: []
            },
            {
              id: 102,
              menuName: '日历',
              path: 'Calendar',
              order: 2,
              icon: 'el-icon-date',
              children: []
            },
            {
              id: 103,
              menuName: '关于',
              path: 'about',
              order: 3,
              icon: 'el-icon-user',
              children: []
            }
          ]
        },
        {
          id: 1000,
          menuName: '系统工具类',
          path: '',
          order: 1000,
          icon: 'el-icon-s-tools',
          children: [
            {
              id: 10001,
              menuName: '自定义枚举生成',
              path: 'customEnumVue',
              order: 1,
              icon: 'el-icon-s-flag',
              children: []
            }
          ]
        }
      ],
      meta: {
        msg: '获取菜单列表成功',
        status: 200
      },
      isCollapse: false,
      activePath: ''
    }
  },
  created () {
    this.getMenuList()
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    // 动态获取菜单信息
    getMenuList () {

    },
    // 折叠菜单
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    // 链接激活状态
    activeMenu (path) {
      window.sessionStorage.setItem('activePath', path)
      this.activePath = path
    }
  }
}
</script>

<style lang="less" scoped>
  .logo {
    width: 40px;
  }
  .el-header{
    background-color: #2E2E2E;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    font-size: 20px;
    > div {
      display: flex;
      align-items: center;
      span{
        margin-left: 15px;
      }
    }
  }
  .el-aside{
    background-color: #424242;
    .el-menu{
      border-right: none;
    }
  }
  .el-main{
    background-color: #fff;
  }
  .toggle-button{
    background-color: #424242;
    font-size: 10px;
    color: #fff;
    line-height: 25px;
    text-align: center;
    letter-spacing: 0.3em;
    cursor: pointer;
  }
</style>
